<template>
  <div>
    <vc-viewer @ready="ready">

    </vc-viewer>
  </div>
</template>

<script setup>
let myEntityCollection = null;
let myEntityCollection2 = null;
const ready = ({ Cesium, viewer }) => {
  let url = new URL("@/mock/sds.geoJson", import.meta.url).href;
  let sheng = [
    "北京市",
    "天津市",
    "河北省",
    "山西省",
    "内蒙古自治区",
    "辽宁省",
    "吉林省",
    "黑龙江省",
    "上海市",
    "江苏省",
    "浙江省",
    "安徽省",
    "福建省",
    "江西省",
    "山东省",
    "河南省",
    "湖北省",
    "湖南省",
    "广东省",
    "广西壮族自治区",
    "海南省",
    "重庆市",
    "四川省",
    "贵州省",
    "云南省",
    "西藏自治区",
    "陕西省",
    "甘肃省",
    "青海省",
    "宁夏回族自治区",
    "新疆维吾尔自治区",
    "台湾省",
    "香港特别行政区",
    "澳门特别行政区"
  ]
  // for (let i = 0; i < sheng.length; i++) {
  // console.log(sheng[i]);
  let urls = new URL(`@/mock/重庆市.json`, import.meta.url).href
  console.log("---------------urls", urls);
  var promise = Cesium.GeoJsonDataSource.load(urls);
  promise.then(function (dataSource) {
    viewer.dataSources.add(dataSource);
    var entities = dataSource.entities.values;
    for (var i = 0; i < entities.length; i++) {
      var entity = entities[i];
      entity.type = 'ssq'
    }
  }).otherwise(function (error) {
    console.log(error);
  });
  // }


  let url2 = new URL("@/mock/wfs.json", import.meta.url).href;



  window.utilCesium = Cesium;
  window.utilViewer = viewer;

  //新建自定义数据源
  let myEntityCollection = new Cesium.CustomDataSource("红点图层");
  let myEntityCollection2 = new Cesium.CustomDataSource("绿点图层");
  //将数据源添加至cesium视图内
  viewer.dataSources.add(myEntityCollection);
  viewer.dataSources.add(myEntityCollection2);
  
  //数据源内添加实体
  for (let i = 0; i < 300; i++) {  //循环创建300个实体点
    let jd = Math.random() * 50;
    let wd = Math.random() * 20;
    myEntityCollection.entities.add({  //将实体点添加到数据源内
      id:i,
      position: Cesium.Cartesian3.fromDegrees(100 + jd, 20 + wd),
      point: {
        pixelSize: 10,
        color: Cesium.Color.RED
      }
    });

  }
  console.log(viewer,"----------37",myEntityCollection.entities.getById(3) );
  viewer._selectedEntity = myEntityCollection.entities.getById(3)
  // for (let i = 0; i < 300; i++) {  //循环创建300个实体点
  //   let jd = Math.random() * 50;
  //   let wd = Math.random() * 20;
  //   myEntityCollection2.entities.add({  //将实体点添加到数据源内
  //     position: Cesium.Cartesian3.fromDegrees(100 + jd, 20 + wd),
  //     point: {
  //       pixelSize: 10,
  //       color: Cesium.Color.GREEN
  //     }
  //   });

  // }

  // myEntityCollection2.show = false;

  //实体聚合方法

  myEntityCollection.clustering.enabled = true  //手动设置允许实体聚类
  //监听聚类变化时触发事件 
  /**
   * @param clusteredEntities 返回聚类的实体集合
   * @param cluster 聚类中心点的信息
   */


  myEntityCollection.clustering.clusterEvent.addEventListener((clusteredEntities, cluster) => {
    //图片路径
    let herf = new URL('@/assets/logo/logo.png', import.meta.url).href;
    cluster.billboard.image = herf
    cluster.billboard.show = true
    // cluster.label.font= '30pt sans-serif', //字体大小和样式
    cluster.label._backgroundPadding = undefined
    cluster.label.fillColor = Cesium.Color.YELLOW
    cluster.label.pixelOffset= new Cesium.Cartesian2(-10, 0)// 两个参数一个x偏移 一个y偏移
    cluster.label.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND
    // cluster.billboard._verticalOrigin = 1
    // cluster.label._verticalOrigin = 2
    // viewer.entities.raiseToTop( cluster.label);
    // cluster.label.pixelOffset= new Cesium.Cartesian2(0, -30)// 两个参数一个x偏移 一个y偏移
    // console.log("----------6", cluster);
    //隐藏默认的label
    // cluster.label.show = false
    //将坐标系转换为经纬度
    // var cartographicPosition = Cesium.Cartographic.fromCartesian(cluster.point.position);
    // //经度
    // var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
    // //维度
    // var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);

    // for (let i = viewer.entities.values.length-1; i >=0; i--) {
    //  let entity = viewer.entities.values[i]
    //  if(entity.type == 'clusteredEntitiesNum'){
    //   viewer.entities.remove(entity)
    //  }

    //   // console.log();
    // }
    //渲染实体
    // var entity = viewer.entities.add({
    //   type:"clusteredEntitiesNum",
    //   position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
    //   billboard: {
    //     image: herf,//图片
    //     scale: 3.0, //缩放比例
    //   },
    //   label: {
    //     text: cluster.label.text,//数量
    //     font: '30pt sans-serif', //字体大小和样式
    //     fillColor: Cesium.Color.RED,//字体颜色
    //   }
    // });


  })

}
</script>

<style lang="scss" scoped></style>